<template>
  <div class="container">
    <van-nav-bar title="选择规格" left-text="返回" right-text left-arrow @click-left="onClickLeft" fixed/>
    <div class="mainInfo">
      <div class="name" v-if="initData.list">{{initData.list.material_name}}</div>
      <div class="discribe" v-if="initData.list">{{initData.list.note}}</div>
    </div>
    <div class="tab">
      <van-tabs v-model="active">
        <van-tab title="请购">
          <div class="spe">
            <ul>
              <li v-for="(item,index) in listtype" :key="index">
                <div class="type">
                  <div class="left">{{item.specifications_name}}</div>
                  <div class="right">￥{{item.price}}</div>
                </div>
                <div class="num">
                  <label>请购数量</label>
                  <input type="text" v-model="item.num" placeholder="请输入请购数量" @keyup="changeNum">
                  <span>/{{initData.list.unit}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="footer">  
            <div class="left">
              共
              <span>{{numTotal}}</span>种，合计：
              <span>￥{{priceTotal}}</span>
            </div>
            <div class="buy" @click="confirm">确定</div>
          </div>
        </van-tab>
        <van-tab title="出库">
          <div class="spe">
            <ul>
              <li v-for="(item,index) in reduceData.goods_specifications_list" :key="index">
                <div class="type">
                  <div class="left">{{item.specifications_name}}</div>
                  <div class="right">当前库存{{item.repertory_number}}米</div>
                </div>
                <div class="num">
                  <label>出库数量</label>
                  <input type="text" v-model="item.num" placeholder="请输入请购数量" @keyup="changeNum">
                  <span>/{{reduceData.goods.unit}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="footer">
            <div class="left"></div>
            <div class="buy" @click="confirmOutbound">确定出库</div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
export default {
  name: "chooseSpe",
  data() {
    return {
      initData: {},
      //出库数据
      reduceData: [],
      id: "",
      numTotal: 0,
      priceTotal: 0,
      listtype: [],
      goods: [],
      goodsItem: { goods_id: "", num: "" },
      active: 0
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getInitData();
    this.getReduceData();
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    //添加购物车
    async confirm() {
      this.goods = [];
      this.listtype.forEach((item, index) => {
        if (item.num > 0) {
          this.goodsItem.goods_id = item.goods_id;
          this.goodsItem.num = item.num;
          this.goods.push(this.goodsItem);
        }
      });

      let params = {
        Goods: JSON.stringify(this.goods),
        user_id: this.$cookies.get("user_id")
      };
      const res = await this.$axios.post(this.$api.add_cat, params);
      if (res.code == 1) {
        this.$router.push({ path: "/index", query: {} });
      } else {
        this.$toast(res.msg);
      }
    },
    //请购接口
    async getInitData() {
      let params = {
        id: this.id
      };
      const res = await this.$axios.post(
        this.$api.getGoodsVOByMaterial,
        params
      );
      if (res.code == 1) {
        this.initData = res.data;

        this.initData.listtype.forEach((item, index) => {
          item.num = 0;
        });
        this.listtype = this.initData.listtype;
      } else {
        this.$toast(res.msg);
      }
    },
    //出库列表接口
    async getReduceData() {
      let params = {
        params: {
          id: this.id
        }
      };
      const res = await this.$axios.get(
        this.$api.reduce_repertory_init,
        params
      );
      if (res.code == 1) {
        this.reduceData = res.data;
        this.reduceData.goods_specifications_list.forEach((item, index) => {
          item.num = 0;
        });
      } else {
        this.$toast(res.msg);
      }
    },
    changeNum() {
      this.$forceUpdate();
      this.numTotal = 0;
      this.priceTotal = 0;
      this.listtype.forEach((item, index) => {
        if (item.num > 0) {
          this.numTotal++;
          this.priceTotal += item.num * item.price;
        }
      });
      if (this.priceTotal) {
        this.priceTotal = Number(this.priceTotal).toFixed(2);
      }
    },
    //确认出库
    async confirmOutbound() {
      let list = [];
      this.reduceData.goods_specifications_list.forEach((item, index) => {
        if (item.num > 0) {
          let obj = {
            goods_specifications_id: item.id,
            reduce_number: item.num
          };
          list.push(obj);
        }
        item.num = 0;
      });
      let params = {
        reduce_list: JSON.stringify(list)
      };
      const res = await this.$axios.post(this.$api.reduce_repertory, params);
      if (res.code == 1) {
        this.$toast("出库成功");
      } else {
        this.$toast(res.msg);
      }
    }
  }
};
</script>
<style scoped>
.container {
  padding-top: 0.46rem;
  padding-bottom:.7rem;
}
.mainInfo {
  width: 100%;
  padding: 0.15rem;
  background: #fff;
}
.mainInfo .name {
  font-size: 0.16rem;
  color: #333333;
  margin-bottom: 0.1rem;
}
.mainInfo .discribe {
  color: #666666;
  font-size: 0.14rem;
}
.spe {
  margin-top: 0.01rem;
}
.spe li {
  background: #fff;
  margin-bottom: 0.02rem;
  padding: 0.15rem;
}
.type {
  padding: 0.05rem 0.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.num {
  padding: 0.05rem 0.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.num input {
  border: 1px solid #eeeeee;
  height: 0.3rem;
  padding-left: 0.1rem;
}
.footer {
  width: 100%;
  height: 0.6rem;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  background: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
}
.footer .buy {
  width: 30%;
  height: 100%;
  background: #56e519;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer img {
  width: 0.18rem;
}
.footer .left {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 70%;
}
.footer .left span {
  color: #e59b4d;
}
.footer .left > div {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  color: #656565;
  font-size: 0.12rem;
}
.footer .left > div span {
  margin-top: 0.05rem;
}
.tab {
  margin-top: 0.2rem;
}
.tab >>> .van-tabs__line {
  background: #56e519;
}
</style>


